// Fonts
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

// Variables
@import '_variables';
@import '_loading';

// Mixins
@import '_mixins/_badge';

// Modules
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/src/index';
@import '~cropperjs/src/index';

@import '_mixins/_badge';

// Bootstrap Components
@import '_bs/_badge';
@import '_bs/_btn';
@import '_bs/_card';
@import '_bs/_dropdown';
@import '_bs/_list-group';
@import '_bs/_input-group';
@import '_bs/_modal';
@import '_bs/_pagination';
@import '_bs/_progress';
@import '_bs/_table';
@import '_bs/_tabs';
@import '_bs/_tags';
@import '_bs/_toasts';
@import '_bs/_tooltip';
@import '_bs/_textarea';

// Lit Components
@import '_lit/_blockquote';
@import '_lit/_blocks';
@import '_lit/_spinner';
@import '_lit/_hide';
@import '_lit/_table';
@import '_lit/_dark';
@import '_lit/_custom-switch';

// Layout
@import 'layout';
@import 'landing';
@import 'brand';
@import 'navigation';
@import 'topbar';

// Atoms
//@import '_atoms/border';
//@import '_atoms/bs-buttons';
//@import '_atoms/lit-brand';
//@import '_atoms/lit-card';
//@import '_atoms/lit-search';
//@import '_atoms/lit-draggable';
//@import '_atoms/lit-spinner';
//@import '_atoms/lit-hide';
//@import '_atoms/lit-table';

// Molecules
//@import '_molecules/lit-topbar';
//@import '_molecules/lit-dropzone';
//@import '_molecules/lit-form';
//@import '_molecules/lit-tabs';
//@import '_molecules/lit-modal';
//@import '_molecules/lit-block';
//@import '_molecules/lit-cropper';
//@import '_molecules/lit-toast';

body,
html {
    background-color: $body-bg;
    font-family: 'Inter', sans-serif;

    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

div#litstack {
    background-color: $body-bg;
    min-height: 100vh;

    .btn:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}

.form-control-expand {
    flex-grow: 1;
}

.modal-backdrop {
    opacity: 0.5 !important;
}

.lit-trash {
    svg:hover {
        cursor: pointer;
        color: black;
    }
}

.lit-draggable__dragbar {
    cursor: pointer;
}
